From 5f2f23eeb62c390182334394a4306b0eda287ffa Mon Sep 17 00:00:00 2001
From: Factiven <dabinaya.fathan@gmail.com>
Date: Tue, 2 May 2023 14:17:51 +0700
Subject: Update pre - v3.5.4

> UI adjustment on smaller devices
---
 pages/anime/[...id].js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

(limited to 'pages/anime/[...id].js')

diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index 26c42cb..4b759b6 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -447,21 +447,25 @@ export default function Info() {
                     </div>
                   )}
                 </div>
-                <div className="bg-secondary rounded-sm h-[30px]">
-                  <div className="flex items-center justify-center h-full gap-10 p-2">
+                <div className="bg-secondary rounded-sm xs:h-[30px]">
+                  <div className="grid grid-cols-3 place-content-center xs:flex  items-center justify-center h-full xs:gap-10 p-2 text-sm">
                     {info && info.status !== "NOT_YET_RELEASED" ? (
                       <>
-                        <div className="flex-center gap-2">
+                        <div className="flex-center flex-col xs:flex-row gap-2">
                           <TvIcon className="w-5 h-5 text-action" />
                           <h4 className="font-karla">{info?.type}</h4>
                         </div>
-                        <div className="flex-center gap-2">
+                        <div className="flex-center flex-col xs:flex-row gap-2">
                           <ArrowTrendingUpIcon className="w-5 h-5 text-action" />
                           <h4>{info?.averageScore}%</h4>
                         </div>
-                        <div className="flex-center gap-2">
+                        <div className="flex-center flex-col xs:flex-row gap-2">
                           <RectangleStackIcon className="w-5 h-5 text-action" />
-                          <h1>{info?.episodes} Episodes</h1>
+                          {info?.episodes ? (
+                            <h1>{info?.episodes} Episodes</h1>
+                          ) : (
+                            <h1>TBA</h1>
+                          )}
                         </div>
                       </>
                     ) : (
@@ -676,8 +680,8 @@ export default function Info() {
                   )}
                   {info?.nextAiringEpisode && (
                     <div className="flex items-center gap-2">
-                      <div className="flex items-center gap-4">
-                        <h1>Next Ep :</h1>
+                      <div className="flex items-center gap-4 text-[10px] xxs:text-sm md:text-base">
+                        <h1>Next :</h1>
                         <div
                           className="px-5 rounded-sm font-karla font-bold bg-white text-black"
                           // style={color}
@@ -741,7 +745,7 @@ export default function Info() {
                         <div className="flex flex-col">
                           <h1>{epiStatus} while retrieving data</h1>
                           <pre
-                            className={`rounded-md overflow-hidden ${getLanguageClassName(
+                            className={`rounded-md ${getLanguageClassName(
                               "bash"
                             )}`}
                           >
-- 
cgit v1.2.3